<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>layout布局页面</title>
    <script type="text/javascript" src="../../jquery-1.8.3.js"></script>
    <script type="text/javascript" src="../jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="../../ztree/jquery.ztree.all-3.5.js"></script>
    <link rel="stylesheet" href="../themes/default/easyui.css"/>
    <link rel="stylesheet" href="../themes/icon.css"/>
    <link rel="stylesheet" href="../../ztree/zTreeStyle.css"/>
    <script type="text/javascript">
        $(function () {
            $('#dg').datagrid({
                url:'product.json',
                fit:true,
                border:true,
                rownumbers : true,
                striped : true,
				striped : true,
				pageList: [2,5,50],
				pagination : true,
                toolbar: [{
                    text:"新增",
                    iconCls: 'icon-add',
                    handler: function(){
                        //alert(currentRowIndex)
                        if(currentRowIndex!=undefined){
                            return;
                        }
                        currentRowIndex=0;  //0表示新增位置是第一行
                        $("#dg").datagrid("insertRow",{
                            index:currentRowIndex,
                            row:{
                                //空值表示不初始化
                            }
                        });
                        //开启编辑模式
                        $("#dg").datagrid("beginEdit",currentRowIndex);
                        //保存全局变量
                        currentRowIndex=0;
                    }
                },'-',{
                    text:"编辑",
                    iconCls: 'icon-edit',
                    handler: function(){
                        //alert('编辑按钮')
                        if(currentRowIndex != undefined){
                            // 正在编辑
                            return ;
                        }
                        // 获取到选中行
                        var row = $("#dg").datagrid('getSelected');
                        var index = $("#dg").datagrid('getRowIndex',row);
                        // 编辑选中的行
                        $("#dg").datagrid('beginEdit',index);
                        // 保存到全局变量
                        currentRowIndex = index ;

                    }
                },'-',{
                    text:"保存",
                    iconCls: 'icon-save',
                    handler: function(){
                        //alert('保存按钮')
                        $("#dg").datagrid("endEdit",currentRowIndex);
                    }
                },'-',{
                    text:"取消",
                    iconCls: 'icon-cancel',
                    handler: function(){
                        //alert('取消按钮')
                        //取消编辑
                        $("#dg").datagrid("cancelEdit",currentRowIndex);
                    }
                },'-',{
                    text:"帮助",
                    iconCls: 'icon-help',
                    handler: function(){alert('帮助按钮')}
                }],



                columns:[[
                    {field:'id',title:'代码',width:100,
                        editor:{
                            type:"validatebox",
                            options:{
                                required:true
                            }
                        }
                    },
                    {field:'name',title:'名称',width:100,
                        editor:{
                            type:"validatebox",
                            options:{
                                required:true
                            }
                        }},
                    {field:'price',title:'价格',width:100,align:'right',
                        editor:{
                            type:"validatebox",
                            options:{
                                required:true
                            }
                        }}
                ]],
                singleSelect : true , // 只能编辑一行
                onAfterEdit : function(rowIndex, rowData, changes){
                    // 当保存成功后 才会触发
                    currentRowIndex = undefined;
                },
                onCancelEdit : function(rowIndex, rowData){
                    currentRowIndex = undefined;
                }

            });
            var currentRowIndex = undefined;

        })
    </script>
</head>

<body>
    <table id="dg"></table>
</body>

</html>